<html>
    <head>
        <title>异步组件</title>
    </head>
    <body>
        <script>
            // 异步组件
                    /*
                          在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。
                          为了简化，Vue 允许你"以一个工厂函数"的方式定义你的组件，这个工厂函数会"异步解析你的组件定义"。

                          Vue 只有在这个组件需要被渲染时才会触发该工厂函数，且会把结果缓存起来以供未来渲染。
                    */
                           // 例如：
                                    Vue.component('async-example',function(resolve,rejext ){
                                        setTimeout(function(){
                                            // 向'resolve'回调传递组件定义
                                            resolve({
                                                template:`<div>I am async component!</div>`
                                            });
                                        },1000)
                                    });

                    /*
                        如你所见，在注册组件时，Vue.component()方法的第二个参数不再是一个组件的选项对象，而是一个返回Promise的函数(称为"工厂函数")。
                        工厂函数返回的Promise中包含一个resolve回调，这个回调函数会在你从服务器得到组件定义的时候被调用。
                        你也可以调用reject()来表示加载失败.
                        这里的 "setTimeout"是为了演示而进行的模拟异步请求，实际开发中，如何获取组件取决于你自己。
                    */
                            // 一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用。
                                   Vue.component('async-webpack-example',function(resolve){
                                         /*
                                            这个特殊的 'require' 语法将会告诉 webpack :"自动将你构建的代码分割成多个包，这些包会通过 Ajax请求加载"
                                         */
                                          require(['./my-async-component.vue'],resolve)
                                   })

                    /*
                        你也可以在工厂函数中返回一个Promise,所以把 webpack2 和 ES2015 语法加在一起，我么可以这样使用动态导入：
                    */
                                   Vue.component('async-webpack-example',
                                     // 这个动态导入会返回一个Promise对象
                                     ()=> import('./my-async-component')
                                   )

                    // 当使用"局部注册"时，你也可以直接提供一个返回Promise的函数:
                                   new Vue({
                                      // ...
                                      components:{
                                        'my-component':()=>import('./my-component');
                                      }
                                   });


                    // ★、处理加载状态
                                // 这里的异步组件工厂函数也可以返回一个如下格式的对象：
                                      const AsyncComponent=()=>{

                                             // 需要加载的组件(应该是一个Promise对发型)
                                             component:import('./MyComponent.vue'),

                                             // 异步组件加载时使用的组件
                                             loading: LoadingComponent,

                                             // 加载失败时使用的组件
                                             error:ErrorComponent,

                                             // 展开加载组件的延时时间. 默认是200ms
                                             delay:200,

                                             // 如果提供了超时时间且组件加载也超时了，则使用加载失败时使用的组件。 默认值是：Infinity
                                             timeout:3000
                                      }
        </script>
    </body>
</html>